<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表:优秀实践，copy domain修改列表
		-->
		<el-table :data="pageData.data" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>

			<el-table-column prop="name" label="数据字典名" width="200" sortable>
				<template slot-scope="scope">
					<a @click="opendsd(scope.row)" style="color:blue;cursor:pointer">{{scope.row.name}}</a>
				</template>
			</el-table-column>
			<el-table-column prop="sn" label="编号" width="350" sortable>
			</el-table-column>
			<el-table-column label="操作" min-width="120">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page="query2.currentPage" :page-size="query.pageSize" :total="pageData.total" style="float:right;">
			</el-pagination>
		</el-col>
		<el-drawer
				title="数据字典明细!"
				:visible.sync="table"
				direction="rtl"
				size="50%">
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="query2">
					<el-form-item>
						<el-button type="primary" @click="handleAdd2">新增</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-table :data="pageData2.data" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" width="60">
				</el-table-column>
				<el-table-column prop="name" label="明细名" width="100" sortable>
				</el-table-column>
				<el-table-column label="操作" min-width="120">
					<template scope="scope">
						<el-button size="small" @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" size="small" @click="handleDel2(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-col :span="24" class="toolbar">
				<el-button type="danger" @click="batchRemove2" :disabled="this.sels.length===0">批量删除</el-button>
				<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange2" :current-page="query2.currentPage" :page-size="query2.pageSize" :total="pageData.total" style="float:right;">
				</el-pagination>
			</el-col>
		</el-drawer>
		<!--编辑界面
		    v-model="editFormVisible" 老版本打开对话框
		    ref="editForm"
                    age:null,
                    state:0,
                    department_id:{},

		-->
		<el-dialog :title="title"  :visible.sync="DTypeVisible" :close-on-click-modal="false">
			<el-form :model="DType" label-width="80px" :rules="DTypeFormRules" ref="DTypeForm">
				<el-form-item label="字典名" prop="username">
					<el-input v-model="DType.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="字典编号" prop="email">
					<el-input v-model="DType.sn" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="DTypeVisible = false">取消</el-button>
				<el-button type="primary" @click.native="DTypeSubmit" :loading="DTypeLoading">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="title"  :visible.sync="DDetailVisible" :close-on-click-modal="false">
			<el-form :model="DDetail" label-width="80px" :rules="DTypeFormRules2" ref="DDetailForm">
				<el-form-item label="明细名" prop="name">
					<el-input v-model="DDetail.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="DDetailVisible = false">取消</el-button>
				<el-button type="primary" @click.native="DDetailSubmit" :loading="DDetailLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    export default {
        data() {
            return {
                table: false,
                dialog: false,
                loading: false,
                pageData:{
                    //分页条
                    total:0,
                    //数据表格
                    data:[]
                },
                pageData2:{
                    //分页条
                    total:0,
                    //数据表格
                    data:[],
                },
                query:{
                    // 搜索关键字
                    keyword:'',
                    //分页条
                    currentPage:1,
                    //分页条
                    pageSize:3
                },
                query2:{
                    // 搜索关键字
                    keyword:'',
                    //分页条
                    currentPage:1,
                    //分页条
                    pageSize:3,
					types_id:1,
                },
				dictionaryTypes:{},
				department:{},
                deptTree:[],
				title:"",
				msg:'',
                listLoading: false,
                sels: [],//列表选中列

                DTypeVisible: false,//编辑界面是否显示
                DTypeLoading: false,
                DDetailVisible: false,//编辑界面是否显示
                DDetailLoading: false,
                DTypeFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                DTypeFormRules2: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                //编辑界面数据
                DType: {
                    id:null,
                  	name:null,
                    sn:null
                },
                DDetail: {
                    id:null,
                  	name:null,
                    types_id:null
                }
            }
        },
        methods: {
            //状态显示转换-不能上色
            // stateFormatter: function (row, column) {
            //    if(row.state==0){
            //        return "正常"
            // 	}else{
            //        return "<font style='color: red;'>禁用</font>"
            // 	}
            // },
            search(){
                //修改页码
                this.query.currentPage =1;
                //改查询条件=双向绑定输入时自动改变
                this.getDictionaryType();
            },
            search2(){
                //修改页码
                this.query2.currentPage =1;
                //改查询条件=双向绑定输入时自动改变
                this.getDictionaryDetail();
            },
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getDictionaryType();
            },
            handleCurrentChange2(val) {
                this.query2.currentPage = val;
                this.getDictionaryDetail();
            },
            //获取用户列表
            getDictionaryType(){
            	//加载条
                this.listLoading = true;
                this.$http.post("/dictionaryType",this.query)
                    .then(result => {
                        this.pageData = result.data;
                        console.debug(this.pageData);
                        //去除加载条
                        this.listLoading = false;
                    })
                    .catch(result=>{
                        alert("错了！");
                    })

            },
            getDictionaryDetail(){
            	//加载条
                this.listLoading = true;
                this.$http.post("/dictionaryDetail",this.query2)
                    .then(result => {
                        this.pageData2 = result.data;
                        console.debug(this.pageData2);
                        //去除加载条
                        this.listLoading = false;
                    })
                    .catch(result=>{
                        alert("错了！");
                    })

            },
            //删除
            handleDel: function (index, row) {

                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(()=>{
                    // 开启加载图标
					this.listLoading = true;
					this.$http.delete("/dictionaryType/"+row.id).then(result=>{
					    if (result.data.success){
                            this.$message({
                                message: "删除成功",
                                type: 'success'
                            });
						}else {
                            this.$message({
                                message:"删除失败",
                                type:'error'
                            })
						}
                        this.listLoading = false;
                        this.getDictionaryType();
					}).catch(result=>{
					    console.log(result)
					    alert("报错")
					})
				})
            },
            //删除
            handleDel2: function (index, row) {

                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(()=>{
                    // 开启加载图标
					this.listLoading = true;
					this.$http.delete("/dictionaryDetail/"+row.id).then(result=>{
					    if (result.data.success){
                            this.$message({
                                message: "删除成功",
                                type: 'success'
                            });
						}else {
                            this.$message({
                                message:"删除失败",
                                type:'error'
                            })
						}
                        this.listLoading = false;
                        this.getDictionaryDetail();
					}).catch(result=>{
					    console.log(result)
					    alert("报错")
					})
				})
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.title = "编辑界面"
                this.DTypeVisible = true;
                this.DType = Object.assign({}, row);
            },
            //显示新增界面
            handleAdd: function () {
                this.title = "新增界面"
                this.DTypeVisible = true;
                // 置空
                this.DType = {
                    id:null,
                    name:null,
                    types_id:null
                };
            },
            //显示编辑界面
            handleEdit2: function (index, row) {
                this.title = "编辑界面"
                this.DDetailVisible = true;
                this.DDetail = Object.assign({}, row);
            },
            //显示新增界面
            handleAdd2: function () {
                this.title = "新增界面"
                this.DDetailVisible = true;
                // 置空
                this.DDetail = {
                    id:null,
                    name:null,
                    sn:null
                };
            },
            //编辑
            DTypeSubmit: function () {
                this.$refs.DTypeForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.DTypeLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.DType);
                            let paraArr = para.department_id;
                            console.debug(paraArr);
							this.$http.put("/dictionaryType",para)
								.then(result=>{
                                    this.DTypeLoading = false;
								    if (result.data.success){
								        this.$message({
											message:"提交成功",
											type:"success"
										})
                                        this.DTypeVisible = false; //关闭对话框
                                        this.$refs['DTypeForm'].resetFields();//重置表单
                                        this.getDictionaryType(); //重新加载
									}else {
                                        this.$message({
                                            message:"提交失败",
                                            type:"error"
                                        })
									}

								})
                        }).catch(result=>{
                            console.debug(result)
							alert("报错")
						})
                    }
                });
            },
            //编辑
            DDetailSubmit: function () {
                this.$refs.DDetailForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.DDetailLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.DDetail);
                            para.types_id = this.query2.types_id;
							this.$http.put("/dictionaryDetail",para)
								.then(result=>{
                                    this.DDetailLoading = false;
								    if (result.data.success){
								        this.$message({
											message:"提交成功",
											type:"success"
										})
                                        this.DDetailVisible = false; //关闭对话框
                                        this.$refs['DDetailForm'].resetFields();//重置表单
                                        this.getDictionaryDetail(); //重新加载
									}else {
                                        this.$message({
                                            message:"提交失败",
                                            type:"error"
                                        })
									}

								})
                        }).catch(result=>{
                            console.debug(result)
							alert("报错")
						})
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    this.$http.patch("/dictionaryType",ids)
						.then(result=>{
						    if(result.data.success){
						        this.$message({
                                    message: "删除成功",
                                    type: 'success'
                                });
							}else {
                                this.$message({
                                    message: "删除失败",
                                    type: 'error'
                                });
							}
                            this.listLoading = false;
                            this.getDictionaryType();
							// 删除后跳到第一页
							this.handleCurrentChange(1);
						})
                }).catch(() => {
					alert("报错")
                });
            },
            //批量删除
            batchRemove2: function () {
                var ids = this.sels.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    this.$http.patch("/dictionaryDetail",ids)
						.then(result=>{
						    if(result.data.success){
						        this.$message({
                                    message: "删除成功",
                                    type: 'success'
                                });
							}else {
                                this.$message({
                                    message: "删除失败",
                                    type: 'error'
                                });
							}
                            this.listLoading = false;
                            this.getDictionaryDetail();
							// 删除后跳到第一页
							this.handleCurrentChange2(1);
						})
                }).catch(() => {
					alert("报错")
                });
            },
            getEmployee(){
                this.$http.get("/dictionaryType")
                    .then(result=>{
                        if(result){
                            console.debug(result.data)
                            this.dictionaryTypes = result.data
                        }
                    })
            },
            getDeptTree(){
                this.$http.get("/DType/tree")
                    .then(result=>{
                        console.debug(result.data);
                        this.deptTree = result.data;
                    })
            },
            getDept(){
                this.$http.get("/department")
                    .then(result=>{
                        this.department = result.data;
                    })
            },
            opendsd(row){
                this.query2.types_id=row.id;
                this.table = true;
                this.getDictionaryDetail();
            }

        },
        mounted() {
            this.getDictionaryType();
        }
    }



</script>

<style scoped>

</style>